<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>log page</title>
    <script  th:inline="none">
        function getEmail() {
            var a = document.getElementById("send");
            var email = document.getElementById("email");
            var admin = document.getElementById("managerName");
            var password = document.getElementById("password");
            a.href = "/account/sendVerification?email=" + email.value + "&managerName=" + admin.value + "&password=" + password.value;
        }

        function check(e){
            const managerName = document.getElementById("managerName").value;
            const password = document.getElementById("password").value;
            if(managerName==null||managerName===''||managerName===undefined){
                alert("Please enter your managerName!");
                return false;
            }
        else if(password==null||password===''||password===undefined){
                alert("Please enter your password!");
                return false;
            }
        }
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(/images/index_background.png) no-repeat 0px 0px;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        .td1{
            width: 150px;
            font-size: 16px;
            text-align: center;
            padding-top: 30px;
            font-family: sans-serif;
            color: blanchedalmond;
        }

        #register{
            color:darkturquoise;
        }
        #send{
            color: darkturquoise;
        }
    </style>
</head>
<body>
<div id="loginDiv">

    <form action = "/account/login" method="post" id="form" onsubmit="return check(this)">
        <h1 style="text-align: center;color: aliceblue;">LOGIN IN</h1>
        <table>
            <tr>
                <td class="td1">Manager Name:</td>
                <td><p><input type="text" id="managerName" name="managerName" th:value="${session?.managerName}"><label id="name_trip"></label></p></td>
            </tr>
            <tr>
                <td class="td1">Password:</td>
                <td><p><input type="password" id="password" name="password" th:value="${session?.password}"><label id="password_trip"></label></p></td>
            </tr>
            <tr>
                <td class="td1">Email:</td>
                <td><p><input type="email" id="email" name="email" th:value="${session?.email}" onblur="getEmail()"><label id="email_trip"></label><a id="send">send verification</a></p></td>
            </tr>
            <tr>
                <td class="td1">Verification:</td>
                <td><p></span><input type="verification" id="verification" name="verification"><label id="verification_trip"></label></p></td>
            </tr>
        </table>
        <div style="color: red" th:if="${loginError=='password'}"> Wrong ManagerName or Password or Verification! </div>
        <div style="color: red" th:if="${loginError=='email'}"> This manager doesn't have this email </div>
        <div style="text-align: center;margin-top: 30px;">
            <input id="login" type="submit" class="button" name="submit" value="login">
            <input type="reset" class="button" value="reset">
            <a href="https://gitee.com/oauth/authorize?client_id=06f7371ea094c8cd348de60ec50e01744cba07df0a8582ae5b591c63c8989e95&redirect_uri=http://localhost:8080/account/login2&response_type=code&state=1">gitee log in</a>
        </div>
        <div align="center"><a href="/account/toRegister" id="register">Click here to add a manager!</a></div>
    </form>
    <!--    Need a user name and password?-->
    <!--    <a href="/account/toRegister">Register Now!</a>-->
</div>
</body>
</html>